import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Button, Image, Alert, Tooltip, Modal, message, Popconfirm } from 'antd';
import AutoTable from '@/components/AutoTable';
import InitForm from '@/components/InitForm';
import { connect, history } from 'umi';
import moment from 'moment';
import CompanyName from '@/components/CompanyName';

import { PlusOutlined } from '@ant-design/icons';
import { deletebase_salary } from '@/services/business';
// type 类型有 table treeselect upload inputnumber datepicker daterange radio select textarea autoinput editor password input

let defaultFields = {
    status: {
      value: null,
      type: 'select',
      title: '标记公司',
      name: ['status'],
      required: true,
      options: [
        {
          label: '未打通',
          value: 'not_through',
        },
        {
          label: '潜在',
          value: 'latent',
        },
        {
          label: '加微信',
          value: 'wechat',
        },
        {
          label: '有意向',
          value: 'intention',
        },
      ],
      col: { span: 24 },
    },
    remark: {
      value: null,
      type: 'textarea',
      title: '备注',
      name: ['remark'],
      col: { span: 24 },
    },
  },
  valueEnum = {
    stalled: {
      text: '名录中',
    },
    not_remark: {
      text: '未标记',
    },
    not_through: {
      text: '未打通',
    },
    latent: {
      text: '潜在',
    },
    wechat: {
      text: '加微信',
    },
    intention: {
      text: '有意向',
    },
  };

function Followup({ route, dispatch, loading }) {
  const [vs, cvs] = useState(false), //表单显/隐
    [fields, cf] = useState(defaultFields),
    [iftype, ciftype] = useState({}),
    [extraparams, setextraparams] = useState({ status: 'not_remark' });

  let actionRef = useRef(),
    ChildRef = null;
  function reload() {
    actionRef?.current?.reload();
    ChildRef?.onRefresh();
  }

  const tabList = [
    {
      key: 'not_remark',
      tab: '待标记',
    },
    {
      key: 'not_through',
      tab: '未打通',
    },
    {
      key: 'latent',
      tab: '潜在',
    },
    {
      key: 'wechat',
      tab: '加微信',
    },
    {
      key: 'intention',
      tab: '有意向',
    },
  ];

  const columns = [
    {
      title: '公司名称',
      width: 260,
      dataIndex: 'company_name',
      key: 'company_name',
      render: (_, row) => (
        <CompanyName
          row={{ ...row, name: row?.company_name??row.name, id: row?.company_id??row.id }}
          reload={reload}
        />
      ),
    },
    {
      title: '联系人',
      dataIndex: 'customer_name',
      key: 'customer_name',
      ellipsis: true,
    },
    {
      title: '联系人手机号',
      width: 120,
      dataIndex: 'customer_phone',
      key: 'customer_phone',
      render: (_, row) => (
        <Tooltip title={row.customer_phone}>
          <a href={`tel:${row.customer_phone}`} className="oneline">
            {row.customer_phone}
          </a>
        </Tooltip>
      ),
    },
    {
      title: '注册地址',
      dataIndex: 'address',
      key: 'address',
      search: false,
    },
    {
      title: '成立日期',
      dataIndex: 'register_time',
      key: 'register_time',
      search: false,
      render: (text, row) => {
        return row?.register_time ? moment(row.register_time).format('YYYY-MM-DD') : '-';
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      search: false,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      search: false,
      render: (text, row) => <span>{valueEnum[row.status]?.text}</span>,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 160,
      render: (text, record, _, action) => [
        <Popconfirm
          title="归还至企业名录？"
          onConfirm={() => {
            dispatch({
              type: 'business/revert_claim',
              payload: { id: record.id },
            }).then((res) => {
              if (res.code == 0) {
                message.success('操作成功');
                reload();
                cvs(false);
              }
            });
          }}
        >
          <a>归还至名录</a>
        </Popconfirm>,
        <a
          onClick={() => {
            ciftype({
              val: 'edit',
              id: record.id,
              title: '修改',
            });
            cf(() => {
              return { ...defaultFields };
            });
            cvs(true);
          }}
        >
          标记
        </a>,
      ],
    },
  ];

  let saveData = (values) => {
    if (iftype.val == 'edit') {
      dispatch({
        type: 'business/remark_company',
        payload: { ...values, id: iftype.id },
      }).then((res) => {
        if (res.code == 0) {
          message.success('操作成功');
          reload();
          cvs(false);
        }
      });
    }
  };

  return (
    <div className="pgcontainer">
      <AutoTable
        bordered={false}
        tabList={tabList}
        pagetitle={route.name} //页面标题
        columns={columns}
        actionRef={actionRef}
        onRef={(node) => (ChildRef = node)}
        path="/wbn-api/directory"
        extraparams={{ ...extraparams, is_myself: 1 }}
        onTabChange={(key) => {
          setextraparams({
            status: key,
          });
        }}
        //withCard={false}
        //cardtitle = "name" //卡片标题
        //cardavatar = "img_url" //卡片头像
      ></AutoTable>
      <Modal
        maskClosable={false}
        title={iftype.title}
        open={vs}
        onCancel={() => cvs(false)}
        footer={false}
        destroyOnClose={true}
      >
        <InitForm
          fields={fields}
          submitData={(values) => {
            saveData(values);
          }}
          onChange={(changedValues, allValues) => {
            //联动操作
          }}
          submitting={
            loading.effects['business/base_salary'] ||
            loading.effects['business/editbase_salary'] ||
            !vs
          }
        ></InitForm>
      </Modal>
    </div>
  );
}

export default connect(({ business, loading }) => ({
  business,
  loading,
}))(Followup);
